@import './variable.scss';

::v-deep .gis-broadcast-dialog {
  width: 45%;
  height: 60%;
  background-color: #1a4969;
  font-size: px(14);

  .default-divider {
    background-color: rgba(#dcdfe6, 0.8);
    margin: 0;
  }

  .el-dialog__header {
    padding: px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(20);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20);
    height: calc(100% - #{px(120)});
  
    .el-form {
      height: 99%;
      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }
      .el-form-item {
        width: 100%;
        margin-bottom: px(22);
        margin-right: px(10);
        &__content {
          color: #fff;
          line-height: px(34);
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        &__label {
          color: #fff;
          line-height: px(32);
          font-size: px(18);
          color: #fff;
        }
        .el-select{
          max-height: 100%;
          overflow-y: auto;
        }
        .el-select__tags {
          width: 100%;
          max-width: 100% !important;
          padding: px(3) 0;
          transform: none;
          top: 0;
          .el-tag,.el-select__tags-text{
            height: px(28);
            line-height: px(25);
          }
        }

        .el-input__inner{
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          width: 100%;
        }
        
        .el-input,.el-select__tags-text{
          font-size: px(18);
        }
        .el-select .el-input__icon{
          line-height: px(32)
        }
        .el-input__suffix{
          display: none;
        }

        .el-input-number{
          line-height: px(20);
          width: px(100);
        }

      }
      .el-form-item.receiver{
        max-height: 50%;
        .el-input__inner{
          min-height: px(32);
        }
      }

      .el-form-item.flex{
        display: flex;
        align-items: center;
        .el-form-item__content{
          flex: 1;
        }
        .el-input__inner{
          height: px(32) !important;
        }
      }

    .el-radio{
      color: #fff;
      font-size: px(18);
      &__label{
        font-size: px(18);
      }
      .el-radio__inner{
        width: px(16);
        height: px(16);
        &::after {
          width: px(6);
          height: px(6);
        }
      }
    }


      .el-textarea__inner {
        font-size: px(18);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
      
    }

    .broadcast-upload{
      display: flex;
      .el-upload-list__item{
        margin-top: 0;
        font-size: px(18);
        &:hover{
          background-color: #fff;
          .el-upload-list__item-name{
            color: #1a4969;
          }
        }
      }
      .el-upload-list__item-name{
        color: #fff;
        font-size: px(18);
      }
      
    }

    .upload-img{
      background-color: #fff;
      width: px(30);
      height: px(30);
      border-radius: 50%;
      cursor: pointer;
      &:hover{
        background-color: #59abfd;
      }
    }

    .file-list{
      display: flex;
      align-items: center;
      font-size: px(18);
      i {
        margin-left: px(5);
        color: #06f7bb;
        cursor: pointer;
      }
      span:hover{
        background-color: #2f6b8d;
      }
    }

    .back-to-list {
      color: #fff;
      height: px(22);
      width: px(22);
    }
    
  }

  
  .el-dialog__footer {
    padding: 0;
    height: px(50);
    line-height: px(50);
    .dialog-footer{
      margin-right: px(20);
    }
    .el-button {
      background-color: #1a4969;
      color: #fff;
      height: px(32);
      width: px(70);
      font-size: px(14);
      border-radius: px(5);
      padding: 0;
      &:hover {
        background-color: #409eff;
      }
      &.is-disabled{
        background-color: #666666;
      }
    }
  }

  ::-webkit-scrollbar{
    width: px(10);
  }
  /* 垂直滚动条的滑动块 */
  ::-webkit-scrollbar-thumb:vertical {
    border-radius: px(4);
    background-color:#1a4969;
    opacity: 1;
  }
   
  ::-webkit-scrollbar-track {
      border: 1px #d3d3d3 solid;
      box-shadow: 0 0 px(3) #dfdfdf inset;
      border-radius: px(10);
      background: #eee;
  }
  ::-webkit-scrollbar-thumb {
      border: 1px #808080 solid;
      border-radius: px(10);
      background: #999;
  }
 
}

::v-deep .broadcast-dialog {
  width: 45%;
  height: 60%;
  cursor: default;
  background-color: #1a4969;
  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(110)});
    .search-input {
      margin-bottom: px(10);
      font-size: px(14);
      .el-input__inner {
        border-radius: px(5);
        height: px(32);
        line-height: px(32);
        font-size: px(14);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
      .el-input__icon.el-icon-search{
        line-height: px(32)
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: px(10);
  }
  .el-table {
    font-size: px(14);
    td {
      border-bottom: 1px solid #2e67a8;
    }
    tr:hover > td {
      background-color: #2f6b8d;
    }
    .cell{
      line-height: px(23);
    }
    background-color: #1a4969;
    .table-herder-custom {
      background-color: #2e67a8;
      color: #fff;
    }
    .table-cell-custom {
      background-color: #172a47;
      color: #fff;
      .el-link {
        color: #fff;
        margin-left: px(20);
        font-size: px(12);
        &:hover {
          color: #06f7bb;
        }
      }
    }
    ::v-deep .el-table__body tr.current-row > td {
      background: #6bb5e6 !important;
    }
    .el-checkbox{
      font-size: px(14);
      .el-checkbox__inner{
        height: px(14);
        width: px(14);
        &::after{
          height: px(7);
          width: px(3);
          top:px(1);
          left:px(4)
        }
      }
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
      opacity: 0.96;
      .el-dialog__body {
        height: calc(100% - #{px(110)});
        padding-right: px(50);
      }
      .el-dialog__footer {
        position: absolute;
        bottom: 0;
        right: px(30);
      }
      
      .el-form {
        .el-form-item__error {
          font-size: px(12);
          line-height: px(20);
          padding: 0;
        }
        .el-form-item{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          margin-bottom: px(22);
          margin-right: px(10);
        }
        .el-form-item__label,.el-form-item__content {
          color: #fff;
          height: px(32);
          line-height: px(32);
          font-size: px(14);
        }
        .el-form-item__label{
          width: px(150);
          white-space: nowrap;
        }
        .el-form-item__content{
          width: 100%;
          display: flex;
        }
        .el-input__inner {
          border-radius: px(5);
          height: px(32);
          line-height: px(32);
          font-size: px(14);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
        .el-textarea__inner {
          border-radius: px(5);
          font-size: px(14);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
        .upload-file{
          display: flex;
          .el-button{
            height: px(32) !important;
            line-height: px(32) !important;
            font-size: px(12) !important;
            width: px(80) !important;
            margin-left: px(10);
          }
        }
      }

      .el-dialog__footer{
        bottom: px(10);
      }
      
    }

    .trial-box {
      position: absolute;
      left: calc(50% - #{px(100)});
      top: calc(50% - #{px(50)});
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: px(5);
      width: px(200);
      height: px(100);
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
        .trial-txt{
          font-size: px(14);
          margin-left: px(10);
        }
      }
      .row-loading{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
      }
      .row-btn{
        margin-top: px(12);
      }
      .trial-loading {
        width: px(20);
        height: px(20);
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }

  .el-button {
    background-color: #1a4969;
    color: #fff;
    height: px(30);
    line-height: px(30);
    width: px(70);
    font-size: px(12);
    border-radius: px(5);
    padding: 0;
    &:hover {
      background-color: #409eff;
    }
  }
}
